<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:75:"D:\xampp\htdocs\lvyou\public/../application/index\view\trip\trip_price.html";i:1529424240;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>价格详情</title>
    <link rel="stylesheet" href="__CSS__/calendar-price-jquery.min.css">
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei UI";
        }
        .calendar-foot-wrapper {
            display: none;
        }

        .container {
            border-bottom: 0.16rem solid #efefef;
        }

        .pp {
            height: 47px;
            width: 100%;
            text-indent: 20px;
            line-height: 47px;
            margin-top: 0px;
            border-bottom: 0.02rem solid #efefef;
        }
        .pp span {
            display: inline-block;
            margin-left: 162px;
            font-size: 0.16rem;
            width: 76px;
            height: 20px;
            border: 1px solid;
            text-align: center;
            line-height: 20px;
            border-radius: 20px;
            padding-right: 12px;
            letter-spacing: 2px;
            color: #2b9cce;
        }

        ul li {
            list-style: none;
        }

        .list {
            width: 100%;
            position: absolute;
            margin-top: -20px;
            margin-left: -40px;
        }

        .list li {
            width: 100%;
            height: 50px;
            border-bottom: 0.02rem solid #efefef;
        }
        .bot {
            width: 100%;
            height: 50px;
            font-size: 24px;
            position: fixed;
            bottom: 0;
            margin-bottom: 20px;
        }

        .p1 {
            background: #f3ebeb;
            display: inline-block;
            float: left;
            width: 50%;
            height: 100%;
            font-size: 14px;
            line-height: 50px;
            color: #eb5c11;
            text-indent: 20px;
            letter-spacing: 2px;
            margin-top: 20px;
        }

        .p2 {
            width: 50%;
            font-size: 20px;
            line-height: 50px;
            height: 100%;
            display: inline-block;
            float: left;
            background: #eb5c11;
            text-align: center;
            color: #fff;
        }

        .div1, .div2 {
            width: 50%;
            height: 100%;
            float: left;
        }

        .div2 {
            line-height: 50px;
        }

        .reduce, .add, .num {
            display: inline-block;
            width: 25px;
            height: 25px;
            border: 0.05rem solid #b3a3a3;
            line-height: 25px;
            text-align: center;
        }

        .reduce {
            margin-left: 81px;
        }

        .reduce, .add{
            color: #13d647;
            font-weight: bold;
            border-radius: 2px;
        }
        .num{
            width: 30px;
            border-radius: 2px;
        }
        .biaozhun{
            color: #888;
            display: inline-block;
            position: absolute;
            font-size: 12px;
            margin-top: 24px;
            margin-left: -143px;
        }
        .data-hook p:nth-child(2){
            display: none;
        }
        tr,td{
            border: none !important;
        }
        tr{
            width: 70px;
        }
        td{height: 66px;}
        header{
            text-align: center;
            background: #1ab39c;
            color: #fff;
            font-size: 19px;
            font-weight: normal;
            height: 60px;
            line-height: 41px;
            position: fixed;
            width: 100%;
            top: -19px;
            z-index: 111;
            line-height: 40px;
        }
    </style>
</head>
<body>
<header>
    <h3>选择日期和时间</h3>
</header>
<div class="container" style="margin-top:23px;"></div>
<input type="hidden" id="trip_id" name="id" value="<?php echo $id; ?>">
<div style="width: 100%;height:-500px;background: -pink;">
    <p class="pp">请选择出行人数</p>
    <div class="bot">
        <p class="p1">总额￥<span class="total" style="font-size: 20px;"></span></p>
        <p class="p2">下一步</p>
    </div>
    <ul class="list">
        <li>
            <div class="div1">
                <p style="text-indent: 20px;color: #F85D00;"><span style="color: #000;margin-right:20px;">成人</span>单价
                    <span class="people_price" style="margin-left: -4px;color: #eb5c11;font-size: 13px;">￥0.00</span></p>
            </div>
            <div class="div2">
                <span class="reduce">-</span>
                <span class="num people_num">1</span>
                <span class="add">+</span>
            </div>
        </li>
        <li>
            <div class="div1">
                <p style="text-indent: 20px;margin-top: 9px;color: #F85D00"><span style="color: #000;margin-right:20px;">儿童</span>单价<span  class="child_price" style="color: #eb5c11;font-size: 13px;">￥0.00</span>
                    <span class="biaozhun">2到12岁</span>
                </p>
            </div>
            <div class="div2">
                <span class="reduce">-</span>
                <span class="num children_num">1</span>
                <span class="add">+</span>
            </div>
        </li>
    </ul>
</div>


<script src="__JS__/jquery-1.12.4.min.js"></script>
<script src="__JS__/mock-data.js"></script>
<!--<script src="../dist/js/calendar-price-jquery.min.js"></script>-->
<script src="__JS__/calendar-price-jquery.js"></script>
<script>
    $(function () {
        // 生成模拟数据
        var MOCK_DATA = createMockData();

        // 日历设置表单字段配置
        // key 字段名
        // name 表单label
        // value 默认值
        // placeholder input[placeholder]
        var calendarConfig = [
            {
                key: 'buyNumMax',
                name: '最多购买数',
                type: 'number',
                placeholder: '请输入最多购买数量'
            },
            {
                key: 'buyNumMin',
                name: '最少购买数',
                type: 'number',
                placeholder: '请输入最少购买数'
            },
            {
                key: 'price',
                name: '分销售价',
                type: 'text',
                placeholder: '请输入'
            },

        ]

        // 日历中显示配置
        var showConfig = [
            {
                key: 'person_price',
                name: '￥'
            },
            {
                key: 'child_price',
                name: '￥'
            },

        ]

        // 样式颜色配置
        var styleConfig = {
            // 头部背景色
            headerBgColor: '#1ab39c',
            // 头部文字颜色
            headerTextColor: '#fff',
            // 周一至周日背景色，及文字颜色
            weekBgColor: '#1ab39c',
            weekTextColor: '#fff',
            // 周末背景色，及文字颜色
            weekendBgColor: '#098cc2',
            weekendTextColor: '#fff',
            // 有效日期颜色
            validDateTextColor: '#333',
            validDateBgColor: '#fff',
            validDateBorderColor: '#eee',
            // Hover
            validDateHoverBgColor: '#eb5c11',
            validDateHoverTextColor: '#fff',
            // 无效日期颜色
            invalidDateTextColor: '#ccc',
            invalidDateBgColor: '#fff',
            invalidDateBorderColor: '#eee',
            // 底部背景颜色
            footerBgColor: '#fff',
            // 重置按钮颜色
//      resetBtnBgColor: '#77c351',
//      resetBtnTextColor: '#fff',
//      resetBtnHoverBgColor: '#55b526',
//      resetBtnHoverTextColor: '#fff',
//      // 确定按钮
//      confirmBtnBgColor: '#098cc2',
//      confirmBtnTextColor: '#fff',
//      confirmBtnHoverBgColor: '#00649a',
//      confirmBtnHoverTextColor: '#fff',
//      // 取消按钮
//      cancelBtnBgColor: '#fff',
//      cancelBtnBorderColor: '#bbb',
//      cancelBtnTextColor: '#999',
//      cancelBtnHoverBgColor: '#fff',
//      cancelBtnHoverBorderColor: '#bbb',
//      cancelBtnHoverTextColor: '#666'
        }

        // 初始化日历
        var zxCalendar = $.CalendarPrice({
            el: '.container',
            // startDate: '2017-08-02',
            endDate: '2019-02-20',
            data: MOCK_DATA,
            // 配置需要设置的字段名称
            config: calendarConfig,
            // 配置在日历中要显示的字段
            show: showConfig,
            // 自定义颜色
            style: styleConfig
        });

        log(zxCalendar)

        // 监听设置表单提交
        // 将阻止默认流程执行
        // 继续执行默认流程，请执行参数next()
        zxCalendar.$on('submit-form', function (data, next) {
            // data 设置的数据
            console.log('$(submit-form)表单数据 ================')
            console.log(data)

            // 此处可以验证表单
            // 验证表单逻辑....
            // ....

            // 继续执行下一步
            next()
        })

        // 执行过程中错误回调
        zxCalendar.$on('error', function (err) {
            // 执行中的错误提示
            console.error('$on(error)Error:')
            console.log(err)
            alert(err.msg);
        })

        // 切换月份
        zxCalendar.$on('month-change', function (data) {
            log('$on(month-change) 数据：');
            log(data);
        })

        // 点击有效的某一天通知
        zxCalendar.$on('valid-day', function (day, data, next) {
            log('$on(valid-day)当前点击的(有效)日期为: ' + day + ', 数据：');
            log(data);

            // 继续执行默认流程
//      next();
        })

        // 设置数据变化
        zxCalendar.$on('setup-value-change', function (data) {
            log('$on(setup-value-change)设置窗口被修改数据....');
            log(data);
            // 取消设置
            // 这里可以触发关闭设置窗口
        })

        // 点击重置按钮回调
//    zxCalendar.$on('reset', function () {
//      log('$on(reset)数据重置成功！');
//    })
//
//    // 点击确定按钮回调，返回当前设置数据
//    zxCalendar.$on('confirm', function (data) {
//      log('$on(confirm)点击确定按钮通知！');
//      log(data);
//    })
//
//    // 点击取消按钮回调
//    zxCalendar.$on('cancel', function () {
//      log('$on(cancel)取消设置 ....');
//      // 取消设置
//      // 这里可以触发关闭设置窗口
//    })

    });

    function log(s) {
        console.log(s)
    }
    //点击获取价格
    $('.container').delegate('.valid-hook','click',function () {
        $('.people_price').text($(this).find('p').eq(0).text())
        $('.child_price').text($(this).find('p').eq(1).text())
        $('.biaozhun').css('marginLeft','-161px')
        total()
    })
    $('.reduce').click(function () {

        if($(this).siblings('.num').text()==1){
            //alert('最少选择1人')
            return false;
        }else{
            $(this).siblings('.num').text(parseInt($(this).siblings('.num').text()-1))
        }
        total()
    })
    $('.add').click(function () {
        $(this).siblings('.num').text(parseInt($(this).siblings('.num').text())+1)

        total()
    })
    //总额
    function total(){
        $('.total').text(parseInt($('.people_price').text().substring(1))*$('.people_num').text()+parseInt($('.child_price').text().substring(1))*$('.children_num').text())
    }

</script>

</body>
</html>
